import React from "react";


import { View, Text, MovableArea, MovableView } from '@tarojs/components'
import { useState } from 'react'
import './index.scss'


interface Product {
  id: number
  name: string
  price: number
  image: string
}

interface Props {
  products?: Product[]
  onDelete?: (id: number) => void
  onEdit?: (id: number) => void
}


interface Product {
  id: number
  name: string
  price: number
  image: string
}

interface Props {
  products?: Product[]
  onDelete?: (id: number) => void
  onEdit?: (id: number) => void
}

const Sider: React.FC<Props> = ({ products = [], onDelete, onEdit }) => {
  // 使用对象来存储每个商品的滑动位置
  const [movePositions, setMovePositions] = useState<Record<number, number>>({})

  // 获取特定商品的滑动位置
  const getMoveX = (id: number) => {
    return movePositions[id] || 0
  }

  // 设置特定商品的滑动位置
  const setMoveX = (id: number, x: number) => {
    setMovePositions(prev => ({
      ...prev,
      [id]: x
    }))
  }

  const handleTouchEnd = (id: number) => {
    const currentX = getMoveX(id)
    // 如果滑动距离超过一半，则完全展开，否则回弹
    if (currentX < -80) {
      setMoveX(id, -160) // 完全展开操作区域
    } else {
      setMoveX(id, 0) // 回到原始位置
    }
  }

  return (
    <View className='sider-container'>
      <MovableArea style='height: 200px; width: 700px; background: red;'>
        <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'>旅行的意义</MovableView>
      </MovableArea>
    </View>
  )
}


// interface Product {
//   id: number
//   name: string
//   price: number
//   image: string
// }
//
// interface Props {
//   products?: Product[]
//   onDelete?: (id: number) => void
//   onEdit?: (id: number) => void
// }
//
// const Sider: React.FC<Props> = ({ products = [], onDelete, onEdit }) => {
//   const [movingId, setMovingId] = useState<number | null>(null) // movingId,
//
//   const handleTouchStart = (id: number) => {
//     setMovingId(id)
//   }
//
//   const handleTouchEnd = () => {
//     setMovingId(null)
//   }
//
//   return (
//     <View className='sider-container'>
//       {products.map((product) => (
//         <View key={product.id} className='product-item'>
//           <MovableArea className='movable-area'>
//             <MovableView
//               className='product-content'
//               direction='horizontal'
//               outOfBounds
//               damping={30}
//               friction={2}
//               onChange={(e) => {
//                 if (e.detail.source === 'touch') {
//                   if (e.detail.x < -100) {
//                     // 完全展开操作区域
//                   } else if (e.detail.x > -10) {
//                     // 回到原始位置
//                   }
//                 }
//               }}
//               onTouchStart={() => handleTouchStart(product.id)}
//               onTouchEnd={handleTouchEnd}
//             >
//               <View className='product-info'>
//                 <View className='product-image' style={{ backgroundImage: `url(${product.image})` }} />
//                 <View className='product-details'>
//                   <Text className='product-name'>{product.name}</Text>
//                   <Text className='product-price'>¥{product.price.toFixed(2)}</Text>
//                 </View>
//               </View>
//             </MovableView>
//
//             <View className='product-actions'>
//               <View
//                 className='action-btn edit-btn'
//                 onClick={() => onEdit && onEdit(product.id)}
//               >
//                 编辑
//               </View>
//               <View
//                 className='action-btn delete-btn'
//                 onClick={() => onDelete && onDelete(product.id)}
//               >
//                 删除
//               </View>
//             </View>
//           </MovableArea>
//         </View>
//       ))}
//     </View>
//   )
// }


const ProdList2_: React.FC = () => {
  const img = 'http://gips0.baidu.com/it/u=1490237218,4115737545&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720'
  const products = [
    { id: 1, name: '商品1', price: 99.99, image: img },
    { id: 2, name: '商品2', price: 199.99, image: img },
    { id: 3, name: '商品3', price: 199.99, image: img },
    { id: 4, name: '商品4', price: 199.99, image: img },
    { id: 5, name: '商品5', price: 199.99, image: img },
    { id: 6, name: '商品6', price: 199.99, image: img },
    { id: 7, name: '商品7', price: 199.99, image: img },
    // 更多商品...
  ]

  const handleDelete = (id: number) => {
    console.log('删除商品:', id)
    // 实现删除逻辑
  }

  const handleEdit = (id: number) => {
    console.log('编辑商品:', id)
    // 实现编辑逻辑
  }

  return (
    <div>
      <Sider
        products={products}
        onDelete={handleDelete}
        onEdit={handleEdit}
      />
    </div>
  )

}

export const Sider1 = React.memo(Sider)
export const ProdList2 = React.memo(ProdList2_)
